<script>
/*
 * @Author: wzh 
 * @Date: 2021-01-03 22:44:39 
 * @Last Modified by: 1521620993@qq.com
 * @Last Modified time: 2021-01-20 11:25:27
 */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-边框流动的幻影按钮</title>
</head>
<body>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #050801;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
body a {
  display: inline-block;
  padding: 25px 30px;
  color: #03e9f4;
  text-decoration: none;
  letter-spacing: 4px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: 0.5s;
  margin: 40px 0;
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0,0,0,0.333));
}
body a:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
}
body a:nth-of-type(1) {
  filter: hue-rotate(290deg);
/* 会影响包含块 */
}
body a:nth-of-type(3) {
  filter: hue-rotate(160deg);
}
body a span {
  position: absolute;
}
body a span:nth-child(1) {
  width: 100%;
  height: 2px;
  top: 0;
  left: 0;
  background: linear-gradient(to right, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
  animation-delay: 0s;
}
@-moz-keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@-webkit-keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@-o-keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
body a span:nth-child(2) {
  width: 2px;
  height: 100%;
  top: -100%;
  right: 0;
  background: linear-gradient(to bottom, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@-moz-keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@-webkit-keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@-o-keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%, 100% {
    top: 100%;
  }
}
body a span:nth-child(3) {
  width: 100%;
  height: 2px;
  bottom: 0;
  right: -100%;
  background: linear-gradient(to left, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@-moz-keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
@-webkit-keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
@-o-keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%, 100% {
    right: 100%;
  }
}
body a span:nth-child(4) {
  width: 2px;
  height: 100%;
  bottom: -100%;
  left: 0;
  background: linear-gradient(to top, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@-moz-keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
@-webkit-keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
@-o-keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%, 100% {
    bottom: 100%;
  }
}
</style>
  <a href="">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    按钮 Button
  </a>
  <a href="">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    按钮 Button
  </a>
  <a href="">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    按钮 Button
  </a>
<!-- 
*
  margin 0
  padding 0
  box-sizing: border-box
  background-color #050801
body
  display flex
  flex-direction column
  min-height: 100vh
  justify-content center
  align-items center
  a
    display inline-block
    padding 25px 30px
    // background-color red
    color #03e9f4
    text-decoration none
    letter-spacing: 4px
    text-transform uppercase
    position relative
    overflow hidden
    transition 0.5s
    margin 40px 0
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005)
    &:hover
      background-color #03e9f4
      color #050801
      box-shadow 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4
    &:nth-of-type(1)
      filter hue-rotate(290deg)
      /* 会影响包含块 */
    &:nth-of-type(3)
      filter hue-rotate(160deg)
    span
      position absolute
      &:nth-child(1)
        width 100%
        height 2px
        top 0
        left 0
        background linear-gradient(to right, transparent, #03e9f4)
        animation animate1 1s linear infinite
        animation-delay 0s
        @keyframes animate1
          0%
            left -100%
          50%, 100%
            left 100%
      &:nth-child(2)
        width 2px
        height 100%
        top -100%
        right 0
        background linear-gradient(to bottom, transparent, #03e9f4)
        animation animate2 1s linear infinite
        animation-delay 0.25s
        @keyframes animate2
          0%
            top -100%
          50%, 100%
            top 100%
      &:nth-child(3)
        width 100%
        height 2px
        bottom 0
        right -100%
        background linear-gradient(to left, transparent, #03e9f4)
        animation animate3 1s linear infinite
        animation-delay 0.5s
        @keyframes animate3
          0%
            right -100%
          50%, 100%
            right 100%
      &:nth-child(4)
        width 2px
        height 100%
        bottom -100%
        left 0
        background linear-gradient(to top, transparent, #03e9f4)
        animation animate4 1s linear infinite
        animation-delay 0.75s
        @keyframes animate4
          0%
            bottom -100%
          50%, 100%
            bottom 100%
 -->
</body>
</html>